<template>
  <div class="user-center-container">
    <el-tabs type="border-card">
      <el-tab-pane label="用户基本信息">
        <div class="user-basic-form-wrap">
          <el-form :model="userForm"  size="mini" :rules="rules" ref="userFormRef" label-width="100px" label-suffix="：">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="userForm.username"></el-input>
            </el-form-item>
            <el-form-item label="手机" prop="phone">
              <el-input v-model="userForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
              <el-input v-model="userForm.nickname"></el-input>
            </el-form-item>
            <el-form-item label="头像" style="line-height: 59px" >
              <img-cutter @cutDown="cutDown" :cutWidth="70" :cutHeight="70" :sizeChange="false">
                <template #open>
                  <el-avatar  :size="50" icon="el-icon-user-solid" :src="serviceUrl+userForm.avatar"></el-avatar>
                </template>
              </img-cutter>
            </el-form-item>
            <el-form-item label="部门">
              <div>{{userForm.dept?userForm.dept.name:'(无)'}}</div>
            </el-form-item>
          </el-form>
          <div style="padding-left: 30px">
            <el-button style="width: 100%" type="primary" @click="submit">提交</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="修改密码">
        <div class="user-change-pass-wrap">
          <el-form label-suffix="：" ref="changePassFormRef" :model="changePassForm" :rules="passRules" label-width="100px" size="mini">
            <el-form-item label="旧密码" prop="password">
              <el-input type="password" v-model="changePassForm.password"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input type="password" v-model="changePassForm.newPassword"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input type="password" v-model="changePassForm.confirmPassword"></el-input>
            </el-form-item>
          </el-form>
          <div style="padding-left: 30px">
            <el-button style="width: 100%" type="primary" @click="changePasswordSubmit">提交</el-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {defineComponent, getCurrentInstance, reactive, ref} from "vue"
import useForm from "@/views/system/user/hooks/useForm"
import ImgCutter from "@/components/ImgCutter";
import {serviceUrl} from "@/utils/request";
import {useStore} from "vuex";
import {changePassword} from "@/api/system/user";
import {ElMessage} from "element-plus";
import useButtonDisabled from "@/hooks/useButtonDisabled/useButtonDisabled";
export default defineComponent({
  name:'userCenter',
  components:{ImgCutter},
  setup(){
    const currentInstance = getCurrentInstance();
    const {userForm,cutDown,editUser,rules,submit} = useForm()
    const store = useStore()
    const  {btnDisabled,clearBtnDisabled} = useButtonDisabled();
    const changePassForm = reactive({
      password:'',
      newPassword:"",
      confirmPassword:''
    })
    function validateConfirmPass(rules,value,callback) {
      if(value!==changePassForm.newPassword){
        callback(new Error("确认密码与新密码输入不一致"))
        return
      }
      callback()
    }
    const passRules = ref({
      password:[
        {required:true,message:'请填写密码',trigger:'blur'},
        {min:6,max:16,message: '密码必须是6-16位字符',trigger:'blur'}
      ],
      newPassword:[
        {required:true,message:'请填写新密码',trigger:'blur'},
        {min:6,max:16,message: '密码必须是6-16位字符',trigger:'blur'}
      ],
      confirmPassword:[
        {required:true,message:'请填写确认密码',trigger:'blur'},
        {validator:validateConfirmPass,trigger:'blur'}
      ]
    })
    function changePasswordSubmit(e){
       currentInstance.refs.changePassFormRef.validate((valid)=>{
        if(!valid){
          return
        }
        btnDisabled(e)
        changePassword({
          password:changePassForm.password,
          newPassword:changePassForm.newPassword
        }).then(()=>{
          ElMessage.success("修改密码成功")
          clearBtnDisabled(e)
        }).catch(()=>{
          clearBtnDisabled(e)
        })
      })
    }
    editUser(store.getters.userInfo.id)
    return {
      userForm,
      serviceUrl,
      cutDown,
      rules,
      submit,
      passRules,
      changePassForm,
      changePasswordSubmit
    }
  }
})
</script>
<style lang="scss" scoped>
.user-center-container{
  padding: 10px;
  height:100%;
  box-sizing: border-box;
  .user-basic-form-wrap,.user-change-pass-wrap{
    width: 500px;
    margin: 30px auto;
  }
  ::v-deep .el-tabs{
    height: 100%;
  }
}
</style>
